<!DOCTYPE html>
<html>
  <head>
    <script type="application/javascript">

// Case 3: Visul component

class PageCaption extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.clicked = false;
  }

  connectedCallback() {
    const html = `<h1>Marcus</h1><button type="button">Ave Marcus!</button>`;
    this.shadowRoot.innerHTML = html;
    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      if (!this.clicked) {
        this.clicked = true;
        const html = `<h1>Ave Marcus Aurelius!</h1>`;
        this.shadowRoot.innerHTML = html;
      }
    });
  }
}

window.customElements.define('page-caption', PageCaption);

    </script>
  </head>
  <body>
    <page-caption></page-caption>
  </body>
</html>
